<template>
  <div>
      <h1>充值</h1>
      <h1>vuexstate数据：{{$store.state.count}}</h1>
      <h1>vuex的getter数据：{{$store.getters.count}}</h1>
      <h1>vuex的getter数据：{{$store.getters.douBleCount}}</h1>
      <button @click="toSay">改变mutatins的数据</button>
      <button @click="toChange">触发actions</button>
      <h1>{{dazhe}}</h1>
  </div>
</template>

<script>

export default {
  name: '2209vueIndex',

  data() {
    return {
      dazhe:8
    };
  },
  // 组件内部的路由钩子函数 
  // 进入当前组件
  beforeRouteEnter (to, from, next) {

    // ...
    console.log(to,'----') //to 当前组件的路由信息
    console.log(from,'----') //from 上一个页面的路由信息
    if(from.name=="cart"){
     
    }
    if(from.path=="/"){
       
    }
    next();
  },
  // 当前组件的更新
  // beforeRouteUpdate(to, from, next){

  // },
    // 离开当前组件
  // beforeRouteLeave (to, from, next) {
  //   // ...
  //   console.log(to,"-----")//即将进入的组件的路由信息
  //    console.log(from,"-----")//当前组件的路由信息
  // },
  mounted() {
    
  },

  methods: {
    toSay(){
      // 通过mutations的方法触发
      this.$store.commit("setCount",10)
    },
    toChange(){
      // 通过dispatch的改state
       this.$store.dispatch("countAct",30)
    }
  },
};
</script>